<template>
	<view 
	class="content"
	:style="{backgroundImage:`url(${bgImg})`,backgroundSize: 'cover',position:'absolute',zIndex:'0'}"
	>
		<view class="game-nav">
			<view class="game-nva-l" @tap.stop="back">
				<image :src="backs" mode="widthFix" lazy-load></image>
			</view>
			<view class="game-nva-r">
				<view class="game-nva-r-t">
					{{i18n.mine}}USDT：{{usdt_.balance || 0}}
				</view>
				<view class="game-nva-r-t">
					{{i18n.mine}}DC{{i18n.currency}}：{{dctoken_.balance || 0}}
				</view>
				<view class="game-nav-r-c">
					{{i18n.room_number}}：{{room_id || '--'}}
				</view>
				<view class="game-nav-r-n">
					<image :src="rocard" mode="widthFix" lazy-load  @tap.stop="clickItem('history')"></image>
					<image :src="record" mode="widthFix" lazy-load  @tap.stop="clickItem('record')"></image>
				</view>
				<view class="game-rule" @tap.stop="clickItem('rules')">
					{{i18n.game_rule}}
				</view>
			</view>
		</view>
	<!-- 	record:'',
		rocard:'' -->
		
		<view class="game-bottom">
			<view class="img01" hover-class="active" @tap.stop="clickItem('match')">
				<image :src="nav0" mode="widthFix" lazy-load></image>
			</view>
			<view class="img02" hover-class="active" @tap.stop="clickItem('create')">
				<image :src="nav1" mode="widthFix" lazy-load></image>
			</view>
			<view class="img03" hover-class="active" @tap.stop="clickItem('join')">
				<image :src="nav2" mode="widthFix" lazy-load></image>
			</view>
		</view>
		
		<view class="watting-mask" v-if="showWatting">
			<view class="watting-mask-content">
				<view class="watting-mask-contant">
					<image :src="pipei" mode="widthFix" lazy-load class="watting-mask-bg"></image>
					<view class="watting-title">
						<view class="">
							{{i18n.room_number}}：{{room_id}}
						</view>
						<text>{{room_info.rs_this || '-'}} / {{room_info.rs_max || '-'}} {{i18n.In_place}}</text>
						
					</view>
					<view class="watting-c">
						{{i18n.Matching}}
					</view>
				</view>
				
			</view>
		</view>
		
		
		<view class="watting-mask" v-if="showInput" @tap.stop="showInput=false">
			<view class="watting-mask-content" @tap.stop="''">
				<view class="watting-mask-contant watting-mask-showinput">
					<image :src="end_room" mode="widthFix" lazy-load="" class="watting-mask-content-bg"></image>
			<!-- 		<view class="watting-title">
						房间号
					</view> -->
					<i class="icon iconfont iconcha" @tap.stop="showInput=false"></i>
					<view class="watting-c">
						<input type="text" value="" :placeholder="i18n.p_enter_room_num" v-model="room_id"/>
					</view>
					<view class="watting-b">
						<view @tap.stop="showInput=false"><image :src="cancle" mode="widthFix" lazy-load></image></view>
						<view @tap.stop="toAddRoom"><image :src="comfirm" mode="widthFix" lazy-load></image></view>
						<!-- <image src="../../static/miner/comfirm.png" mode="widthFix" lazy-load></image>
						<button type="default" @tap.stop="toAddRoom">立即加入</button> -->
					</view>
				</view>
				
			</view>
		</view>
		<load v-if="showLoad"/>
		<view class="mask-top" v-if="showmak"></view>
		<view class="zj_mask" v-if="showzjjl" @tap.stop="closeZjjl">
			<view class="zj_mask_content" @tap.stop="''">
				<view class="zj_mask_contant">
					<image :src="chenggong" mode="widthFix" lazy-load class="zj_mask_cbg"></image>
					<view class="zj_mask_contant-c">
						<text>{{zjjl || 0}} {{token_id || '-'}}</text>
						<image :src="lingqujiangli" mode="widthFix" lazy-load @tap.stop="closeZjjl"></image>
					</view>
					
				</view>
			</view>
		</view>
		
		
		
		<view class="watting-mask" v-if="showCur" @tap.stop="closeCur">
			<view class="watting-mask-content" @tap.stop="''">
				<view class="watting-mask-contant watting-mask-showinput">
					<image :src="end_room" mode="widthFix" lazy-load="" class="watting-mask-content-bg"></image>
			<!-- 		<view class="watting-title">
						房间号
					</view> -->
					<i class="icon iconfont iconcha" @tap.stop="closeCur"></i>
					<view class="watting-c">
						<block v-for="(item,index) in curlist" :key="index">
							<view class="watting-c-l" @tap.stop="curIndex=index">
								<image src="../../static/miner/xing.png" mode="widthFix" lazy-load v-if="curIndex==index"></image>
								<image src="../../static/miner/xing_.png" mode="widthFix" lazy-load v-if="curIndex!=index"></image>
								<text>{{item.kf_num}}{{item.title_en}}</text>
							</view>
						</block>
					</view>
					<view class="watting-b">
						<view @tap.stop="closeCur"><image :src="cancle" mode="widthFix" lazy-load></image></view>
						<view @tap.stop="toACur"><image :src="comfirm" mode="widthFix" lazy-load></image></view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import {fetch, showToast, pageto, forceUpdate, check_login, _updataTabBar} from '@/common/js/util.js'
	import {mapGetters} from 'vuex' 
	var image0 = require("../../static/waitting.gif")
	var image1 = require("../../static/success.gif")
	var image2 = require("../../static/err.gif")
	import Load from '../../components/common/load.vue';
	var timer;
	var timer1;
	var back = require("../../static/back.png")
	var back_en = require("../../static/back_en.png")
	var nav0 = require("../../static/nav0.png")
	var nav0_en = require("../../static/nav0_en.png")
	var nav1 = require("../../static/nav1.png")
	var nav1_en = require("../../static/nav1_en.png")
	var nav2 = require("../../static/nav2.png")
	var nav2_en = require("../../static/nav2_en.png")
	var pipei = require("../../static/pipei.png")
	var pipei_en = require("../../static/pipei_en.png")
	var end_room = require("../../static/miner/end_room.png")
	var end_room_en = require("../../static/miner/end_room_en.png")
	var cancle = require("../../static/miner/cancle.png")
	var cancle_en = require("../../static/miner/cancle_en.png")
	var comfirm = require("../../static/miner/comfirm.png")
	var comfirm_en = require("../../static/miner/comfirm_en.png")
	var chenggong = require("../../static/chenggong.png")
	var chenggong_en = require("../../static/chenggong_en.png")
	var lingqujiangli = require("../../static/lingqujiangli.png")
	var lingqujiangli_en = require("../../static/lingqujiangli_en.png")
	
	var record = require("../../static/record.png")
	var record_en = require("../../static/record_en.png")
	var rocard = require("../../static/rocard.png")
	var rocard_en = require("../../static/rocard_en.png")
	
	export default {
		components:{Load},
		data() {
			return {
				showCur:false,
				showzjjl:false,
				showmak:false,
				showLoad:false,
				showWatting:false,
				bgImg:'',
				room_id:'',
				usdt_:{},
				dctoken_:{},
				room_info:{},
				showInput:false,
				curlist:[],
				curIndex:0,
				is_zj:'',
				bf_status:'',
				cur_id:'',
				zjjl:'',
				token_id:'',
				backs:'',
				nav0:'',
				nav1:'',
				nav2:'',
				pipei:'',
				end_room:'',
				cancle:'',
				comfirm:'',
				chenggong:'',
				lingqujiangli:'',
				record:'',
				rocard:''
			};
		},
		onShow(){
			console.log(this.getLangType);
			
			// console.log(this.getLang,'this,getLang');
			if(this.getLang==1){
				this.backs=back
				this.nav0=nav0
				this.nav1=nav1
				this.nav2=nav2
				this.pipei=pipei
				this.end_room=end_room
				this.cancle=cancle
				this.comfirm=comfirm
				this.chenggong=chenggong
				this.lingqujiangli=lingqujiangli
				this.record=record
				this.rocard=rocard
			}else{
				this.backs=back_en
				this.nav0=nav0_en
				this.nav1=nav1_en
				this.nav2=nav2_en
				this.pipei=pipei_en
				this.end_room=end_room_en
				this.cancle=cancle_en
				this.comfirm=comfirm_en
				this.chenggong=chenggong_en
				this.lingqujiangli=lingqujiangli_en
				this.record=record_en
				this.rocard=rocard_en
			}
			
			
			this.zjjl = ''
			this.bf_status=""
			this.is_zj=""
			this.curIndex =0;
			this.curlist =[]
			this.showCur = false;
			this.showzjjl=false;
			this.showmak=false;
			this.showLoad= false;
			this.room_id=""
			this.showInput = false;
			this.showWatting=false
			this.bgImg=image0
			this.getWallet_info()
			this.watting_room()
			this.getInter_timee();
		},
		computed: {
			i18n() {
				return this.$t('message')
			},
			...mapGetters([
				'getRequestUrl',
				'getLang',
				'getLogin',
				'getLoginInfo',
				'getTextArr',
				'getLangType'
			])
		},
		onUnload(){
			clearInterval(timer)
			timer=null
			timer=""
			clearInterval(timer1)
			timer1=null
			timer1=""
			
		},
		onHide(){
			clearInterval(timer)
			timer=null
			timer=""
			clearInterval(timer1)
			timer1=null
			timer1=""
		},
		methods:{
			closeCur(){
				this.showCur=false;
				this.getInter_timee()
			},
			getInter_timee(){
				timer1 = setInterval(()=>{
					this.watting_room()
				},3000)
			},
			getThis_ganme(){
				// showToast('dede')
				fetch(this.getRequestUrl+'/api/Game/this_game',{id:this.getLoginInfo.id,token:this.getLoginInfo.token},'post').then(res=>{
					if(res.data.code==1){
						this.room_info = res.data.data
						this.showWatting = true
						this.room_id=res.data.msg.room_id
						// this.getInter_timee()
						// this.watting_room();
					}
				})
			},
			getWallet_info(){
				fetch(this.getRequestUrl + '/api/Game/game_wallet',{id:this.getLoginInfo.id,token:this.getLoginInfo.token},"post").then(res=>{				
					if(res.data.code==1){
						let list = res.data.data;
							let usdt = list.filter(item=>item.id==3)
							let dctoken = list.filter(item=>item.id==5)
							this.usdt_=usdt[0],
							this.dctoken_=dctoken[0]	
							this.curlist = list
							this.curlist.forEach((item,index)=>{
								item.kf_num = parseInt(item.kf_num*100000000)/100000000
							})
					}
				})
			},
			egetRoomtid(room_id){
					fetch(this.getRequestUrl+'/api/Game/bf_status',{id:this.getLoginInfo.id,token:this.getLoginInfo.token,game_record_id:room_id},'post').then(res=>{
						
					})
				},
			watting_room(){
				// this.room_info={}
				this.showzjjl = false;
				fetch(this.getRequestUrl + '/api/Game/wait_record',{id:this.getLoginInfo.id,token:this.getLoginInfo.token,},'post').then(res=>{
					// this.showCur = false
					if(res.data.code==1){
						clearInterval(timer1)
						timer1=null
						timer1=""
						// clearInterval(timer)
						// timer=null
						// timer=""
						this.zjjl=parseInt(res.data.msg.num*10000)/10000
						this.token_id=res.data.msg.token_id
						this.is_zj = res.data.msg.is_zj
						this.bf_status = res.data.msg.bf_status
						this.cur_id = res.data.msg.id
						// if(res.data.msg.room_id){
						this.getRoom_Info(res.data.msg.room_id)
						// }
						
					}else if(res.data.code==4){
						// timer1 = setInterval(()=>{
						this.getThis_ganme()
						// },3000)
						clearInterval(timer)
						timer=null
						timer=""
					}else{
						this.room_info={}
					}
				})
			},
			getRoom_Info(id){
				fetch(this.getRequestUrl + '/api/Game/room_data',{id:this.getLoginInfo.id,token:this.getLoginInfo.token,room_id:id},"post").then(res=>{
					if(res.data.code==1){
						if(res.data.data.id){
							this.showWatting = false
							// this.zjjl = res.data.data.zjjl
							this.showLoad= false;
							this.room_id = res.data.data.id
							this.showInput = false;
							this.room_info = res.data.data
							this.showWatting = true
							this.showInput=false
							if(this.bf_status==1){
								clearInterval(timer)
								timer=null
								timer=""
								// return
								this.egetRoomtid(this.cur_id)
								if(this.is_zj==1){
									// this.egetRoomtid(res.data.msg.room_id)
									this.showmak=true;
									this.showLoad=false;
									this.bgImg=image1
									// this.getRoom();
									setTimeout(()=>{
										// this.bgImg=image2
										this.showmak=false
										this.showLoad=false
									},500)
									this.showzjjl = true;
									setTimeout(()=>{
										this.getDefault()
										
									},6000)
								}else{
									
									this.showWatting = false;
									this.showLoad=false;
									this.bgImg=image2
									this.showmak=true;
									// return
									setTimeout(()=>{
										// console.log('111');
										// this.bgImg=image2
										this.showLoad=false
									},500)
									this.showWatting = false;
									this.showmak=false
									
									// return
									setTimeout(()=>{
										this.showzjjl = true;
										this.getDefault()
										// 
									},6000)
									this.getWallet_info();
								}
							}else{
								this.showWatting = true
								this.setInerTime()
							}
						}
						
					}
				}).catch(err=>{
					
				})
			},
			setInerTime(){
				this.watting_room()
			},
			closeZjjl(){
				this.showzjjl=false;
				this.showmak=false;
				this.showLoad= false;
				this.room_id=""
				this.showInput = false;
				this.showWatting=false
				this.getInter_timee()
			},
			toAddRoom(){
				if(!this.room_id){
					showToast(this.getLang==1?'请输入房间号':'Please enter the room number')
					return
				}
				this.getAdd();
			},
			getDefault(){
				this.bgImg=image0
				this.showmak=false
				this.showLoad=false
			},
			toACur(){
				this.getCreate();
			},
			getCreate(){
				let token_id = this.curlist[this.curIndex].id
				let op = {
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token,
					lang_type:this.getLang,
					token_id:token_id
				}
				fetch(this.getRequestUrl + '/api/Game/c_game', op, 'POST')
					.then(res=>{
						this.curIndex =0;
						this.showCur = false;
						showToast(res.data.msg+res.data.data)
						this.getInter_timee();
					})
					.catch(err=>{
						
					})
			},
			clickItem(item){
				switch (item){
					case 'rules':
						uni.navigateTo({
							url:'/pages/mine/rule'
						})
						break;
					case 'history':
						uni.navigateTo({
							url:'/pages/game/history'
						})
						break;
					case 'record':
						uni.navigateTo({
							url:'/pages/game/list'
						})
						break;
					case 'match':
					this.room_id=''
						this.getAdd();
						break;
					case 'create':
					this.showWatting = false
					clearInterval(timer1)
					timer1=null
					timer1=""
					this.showCur = true;
						
						break;
					case 'join':
						this.showInput=true
						break;
				}
			},
			getAdd(){
					let op = {
						id:this.getLoginInfo.id,
						token:this.getLoginInfo.token,
						lang_type:this.getLang,
						// room_id:7,
						room_id:this.room_id
					}
					fetch(this.getRequestUrl + '/api/Game/join_game', op, 'POST')
						.then(res=>{
							this.room_id=""
							showToast(res.data.msg)
							this.showzjjl=false;
							this.showmak=false;
							this.showLoad= false;
							this.room_id=""
							this.showInput = false;
							this.showWatting=false
							if(res.data.code==1){
								let id = res.data.data.getroomInfo
								this.watting_room()
							}
						})
						.catch(err=>{
							
						})
				},
			back(){
				uni.navigateBack({
					delta:1
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.zj_mask{
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,.4);
		z-index: 11;
		.zj_mask_content{
			position: fixed;
			left: 50%;
			top: 50%;
			width: 383rpx;
			height: 388rpx;
			transform: translate(-50%,-50%);
			z-index: 12;
			.zj_mask_contant{
				width: 383rpx;
				height: 388rpx;
				position: relative;
				.zj_mask_cbg{
					position: absolute;
					left: 0;
					top: 0;
					width: 383rpx;
					height: 388rpx;
					flex-shrink: 0;
					z-index: -1;
				}
				.zj_mask_contant-c{
					text-align: center;
					text{
						display: block;
						padding-top: 100rpx;
						line-height: 276rpx;
						color: #FFB60C;
						font-size: 32rpx;
						text-shadow:#ce0224 1rpx 0 0,#ce0224 0 1rpx 0,#ce0224 -1rpx 0 0,#ce0224 0 -1rpx 0;   
					}
					image{
						width: 165rpx;
						height: 68rpx;
						flex-shrink: 0;
					}
				}
			}
		}
	}
	.mask-top{
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 8;
		background: rgba(0,0,0,.999);
	}
	.watting-mask{
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,.4);
		z-index: 10;
		.watting-mask-content{
			position: fixed;
			left: 50%;
			top: 50%;
			width: 493rpx;
			height: 360rpx;
			transform: translate(-50%,-50%);
			.watting-mask-contant{
				width: 493rpx;
				height: 360rpx;
				position: relative;
				background: transparent !important;
				.watting-mask-content-bg{
					position: absolute;
					z-index: -1;
					left: 0;
					top: 0;
					width: 493rpx;
					height: 360rpx;
					flex-shrink: 0;
				}
				.icon{
					position: absolute;
					top: 15rpx;
					right: 15rpx;
					z-index: 5;
					font-size: 28rpx;
					color: #666;
				}
				&.watting-mask-showinput{
					background: #FFFFFF;
					border-radius: 20rpx;
					.watting-title{
						padding: 30rpx 30rpx;
						text-align: left;
						color: #CDD0D2;
					}
					.watting-c{
						padding: 160rpx 50rpx 24rpx;
						// margin-bottom: 40rpx;
						.watting-c-l{
							display: flex;
							// justify-content: center;
							align-items: center;
							padding: 15rpx 0 15rpx 50rpx;
							image{
								width: 32rpx;
								height: 30rpx;
								flex-shrink: 0;
								margin-right: 20rpx;
							}
							text{
								font-size: 26rpx;
								text-shadow:#ce0224 1rpx 0 0,#ce0224 0 1rpx 0,#ce0224 -1rpx 0 0,#ce0224 0 -1rpx 0;  
							}
						}
						input{
							font-size: 28rpx;
							color: #D51009;
							// border: 1rpx solid #CDD0D2;
							background: #E9CEB2;
							border-radius: 8rpx;
							line-height: 64rpx;
							height: 64rpx;
						}
					}
				}
				.watting-mask-bg{
					position: absolute;
					width: 489rpx;
					height: 356rpx;
					flex-shrink: 0;
					left: 0;
					top: 0;
					z-index: -1;
				}
				.watting-title{
					padding: 152rpx 0 46rpx;
					text-align: center;
					color: #D60E00;
					font-size: 26rpx;
					text-align: center;
					view{
						font-size: 30rpx;
						font-weight: bold;
						margin-bottom: 10rpx;
					}
				}
				.watting-c{
					text-align: center;
					color: #D60E00;
					font-size: 36rpx;
					font-weight: bold;
				}
				.watting-b{
					display: flex;
					align-items: center;
					justify-content: center;
					view{
						width: 143rpx;
						height: 55rpx;
						&:first-of-type{
							margin-right: 30rpx;
						}
						image{
							width: 143rpx;
							height: 55rpx;
							flex-shrink: 0;
						}
					}
					// button{
					// 	width: 200rpx;
					// 	line-height: 80rpx;
					// 	height: 80rpx;
					// 	background: #294362;
					// 	color: #FFFFFF;
					// 	font-size: 28rpx;
					// }
				}
			}
		}
	}
	.game-bottom{
		width: 600rpx;
		position: fixed;
		left: 50%;
		bottom: 100rpx;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 99;
		.img01,.img03{
			width: 169rpx;
			height: 70rpx;
			image{
				width: 169rpx;
				height: 70rpx;
				flex-shrink: 0;
			}
			&.active{
				image{
					opacity: .95;
					transform: scale(.95);
				}
			}
		}
		.img02{
			width: 202rpx;
			height: 77rpx;
			image{
				width: 202rpx;
				height: 77rpx;
				flex-shrink: 0;
			}
			&.active{
				image{
					opacity: .95;
					transform: scale(.95);
				}
			}
		}
	}
	.content{
		width: 100%;
		height: 100vh;
		.game-nav{
			display: flex;
			// align-items: center;
			justify-content: flex-end;
			padding: 100rpx 30rpx;
			.game-nva-l{
				position: absolute;
				top: 100rpx;
				left: 30rpx;
				z-index:9999;
				image{
					width: 124rpx;
					height: 54rpx;
					flex-shrink: 0;
				}
			}
			.game-nva-r{
				text-align: right;
				padding-top: 55rpx;
				.game-nva-r-t{ 
					text-shadow:#04616a 4rpx 0 0,#04616a 0 4rpx 0,#04616a -4rpx 0 0,#04616a 0 -4rpx 0;   
					color: #D4FFFE;
					border: #04616a;
					font-size: 32rpx;
				}
				.game-nav-r-c{
					text-shadow:#8e6c4d 4rpx 0 0,#8e6c4d 0 4rpx 0,#8e6c4d -4rpx 0 0,#8e6c4d 0 -4rpx 0;   
					color: #FCE983;
					border: #8e6c4d;
					font-size: 32rpx;
				}
				.game-rule{
					position: absolute;
					right: 30rpx;
					top: 100rpx;
					z-index: 99;
					display: flex;
					color:#ffffff;
					font-weight: bold;
					font-size: 30rpx;
					align-items: center;
					flex-direction: row-reverse;
				}
				.game-nav-r-n{
					position: absolute;
					right: 30rpx;
					top: 300rpx;
					z-index: 99;
					display: flex;
					align-items: center;
					flex-direction: row-reverse;
					// justify-content: space-between;
					image{
						width: 120rpx;
						height: 100rpx;
						flex-shrink: 0;
						&:last-of-type{
							margin-right: 24rpx;
						}
					}
				}
			}
		}
	}
</style>
